import { useRoutes, useLocation, useNavigate } from "react-router-dom";

import routes from "./router";
import { Button, message } from "antd";
import { FloatButton } from "antd";
import { QuestionCircleOutlined } from "@ant-design/icons";
import { useState, useEffect } from "react";
import { instance } from "./utils/request";
import { Drawer, Divider, List, Skeleton } from "antd";
import InfiniteScroll from "react-infinite-scroll-component";
import Register from "./pages/Register";
// 前往登陆页面的组件
function GoLogin() {
  const navigate = useNavigate();
  useEffect(() => {
    navigate("/login");
    message.warning("请登录后访问");
  }, [navigate]);

  return null;
}

// function GoRegister() {
//   const navigate = useNavigate();
//   useEffect(() => {
//     navigate("/register");
//     message.warning("请登注册");
//   }, [navigate]);

//   return null;
// }

// 前往默认页面的组件
function GoHome() {
  const navigate = useNavigate();
  useEffect(() => {
    navigate("/home");
  }, [navigate]);

  return null;
}

function AdminRouter() {
  const outlet = useRoutes(routes);
  const location = useLocation();
  const token = localStorage.getItem("react-jwt-token");

  console.log("token的值", token == null, location.pathname);
  // 前往登录但已经登陆
  if (location.pathname != "/login" && token == null) {
    if (location.pathname === "/register" && token === null) {
      console.log("注册");
      return <Register />;
    }
    return <GoLogin />;
  } else if (location.pathname === "/" && token !== null) {
    // 前往首页但未登录
    return <GoHome />;
  }

  return outlet;
}

/** 这些代码怎么这么屎  */
function App() {
  // const [noticeCount, setNoticeCount] = useState(0);
  // const [isDrawerVisible, setIsDrawerVisible] = useState(false);
  // const [noticeList, setNoticeList] = useState([]);
  // const [loading, setLoading] = useState(false);
  message.useMessage();

  // useEffect(() => {
  //   // loadMoreNoticeCount();
  // }, []);

  // const loadMoreNoticeCount = () => {
  //   instance
  //     .get("notices/noticesCounts")
  //     .then((res) => {
  //       // 假设后端返回的数据格式为 { count: 123 }
  //       setNoticeCount(res.data.data[0].NoticeCount);
  //     })
  //     .catch((error) => {
  //       message.error("获取通知消息数量失败");
  //     });
  // };

  // const loadMoreData = () => {
  //   if (loading) {
  //     return;
  //   }
  //   // 在这里发起获取通知列表的 axios 请求
  //   instance
  //     .get("notices/noticesNoify")
  //     .then((res) => {
  //       setNoticeList(res.data.data);
  //     })
  //     .catch((error) => {
  //       message.error("获取通知列表失败");
  //     });
  //   setLoading(true);
  // };

  // 打开抽屉
  // const handleFloatButtonClick = () => {
  //   setIsDrawerVisible(true);
  //   loadMoreData();
  // };

  // const closeDrawer = () => {
  //   setIsDrawerVisible(false);
  //   // 刷新数量
  //   loadMoreNoticeCount();
  // };

  // const handleMarkAsRead = async (noticeId: any) => {
  //   try {
  //     const mark = await instance.get(`notices/markAsRead/${noticeId}`);
  //     if (mark.data.meta.status === 200) {
  //       message.success("已读完成");
  //       // 移除已读项
  //       setNoticeList((prevList) =>
  //         prevList.filter((notice) => notice.notice_id !== noticeId)
  //       );
  //     } else {
  //       message.error("标记为已读失败");
  //     }
  //   } catch (error) {
  //     message.error("标记为已读失败");
  //   }
  // };

  return (
    <div>
      {/* TODO: 这里登录才显示 */}
      {/*  通知消息 */}
      {/* <FloatButton.Group shape="circle">
        <FloatButton
          badge={{ count: noticeCount, overflowCount: 999 }}
          onClick={handleFloatButtonClick}
        />
      </FloatButton.Group> */}

      <AdminRouter />
      {/* todo */}
      {/* <Drawer visible={isDrawerVisible} onClose={closeDrawer}>
        <h1>通知列表</h1>

        <div
          id="scrollableDiv"
          style={{
            height: 400,
            overflow: "auto",
            padding: "0 16px",
            border: "1px solid rgba(140, 140, 140, 0.35)",
          }}
        >
          <InfiniteScroll
            dataLength={noticeList.length}
            next={loadMoreData}
            hasMore={noticeList.length < 50}
            loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
            endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
            scrollableTarget="scrollableDiv"
          >
            <List
              dataSource={noticeList}
              renderItem={(notice) => (
                <List.Item key={notice.notice_id}>
                  <List.Item.Meta
                    title={
                      <a href="https://ant.design">{notice.notice_name}</a>
                    }
                    description={notice.notice_content}
                  />
                  <Button onClick={() => handleMarkAsRead(notice.notice_id)}>
                    标记为已读
                  </Button>
                </List.Item>
              )}
            />
          </InfiniteScroll>
        </div>
      </Drawer> */}
    </div>
  );
}

export default App;
